<template>
  <div class="container">
    <div class="title">
      <h2>收费明细管理</h2>
      <h5>用于展示收费项目列表信息，以及增加，修改，删除等操作</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form ref="form" :model="formInline" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-select v-model="queryList.community_code" placeholder="请输入" @change="getComExp">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="收费项目">
          <el-select v-model="queryList.project_code" placeholder="请输入">
            <el-option v-for="item in project" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="房产信息">
          <el-select v-model="queryList.house_code" placeholder="请输入">
            <el-option v-for="item in houseArr" :key="item.id" :label="item.name" :value="item.building_code" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker
              v-model="value"
              value-format="timestamp"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime"
            />
          </div>
        </el-form-item>
        <el-form-item class="btn">
          <el-button style="float: right; padding: 10px 20px;" type="primary" @click="onSubmit()">查询</el-button>
          <el-button style="float: right; padding: 10px 20px;margin-right:10px;z-index=100" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button style="float: right; padding: 10px 20px;margin-right:80px" :disabled="!checkBtnPermission('/expenses/index','create')" type="primary" size="small" @click="$refs.addIndex.isDrawer =true">新增项目</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="180"
        />
        <el-table-column
          prop="community.name"
          label="小区名称"
          width="180"
        />
        <el-table-column
          prop="expenses_project.name"
          label="收费项目"
        />
        <el-table-column

          prop="buildingInfo"
          label="房产信息"
        >
          <template />
        </el-table-column>

        <el-table-column
          prop="amount_paid"
          label="应收金额"
        />
        <el-table-column
          prop="amount_total"
          label="实收金额"
        />
        <el-table-column
          prop="remark"
          label="备注"
        />
        <el-table-column
          prop="create_time"
          label="创建时间"
        >
          <template slot-scope="{row}">
            {{ row.create_time |parseTime }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" :disabled="!checkBtnPermission('/expenses/index','update')" @click="edit(row.id)">编辑</el-button>
            <el-button type="text" size="small" :disabled="!checkBtnPermission('/expenses/index','destroy')" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="bottom">
        第{{ startCount }}-{{ endCount }}条/
        <el-pagination
          :current-page.sync="queryList.current"
          :page-size="queryList.pageSize"
          background
          layout="total, prev, pager, next, jumper"
          :total="count"
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </div>

    </el-card>
    <addIndex ref="addIndex" :options="options" :house-arr="houseArr" :project="project" />
  </div>

</template>

<script>
import { getCommunityApi, getExpensesIndexApi, getExpensesByComIdApi, getProjectApi, getEditIndexApi, getDelIndexApi } from '@/api/expenses'
import addIndex from '@/views/expenses/components/addIndex.vue'
export default {
  name: 'VueAdminTemplateMasterProject',
  components: {
    addIndex
  },
  data() {
    return {
      options: [],
      formInline: {},
      value: '',
      tableData: [],
      timestamp: '',
      value1: null,
      count: 0,
      list: [],
      houseArr: [],
      project: [],
      queryList: {
        current: 1,
        pageSize: 10,
        community_code: null,
        project_code: '',
        create_time: '',
        house_code: ''
      }
    }
  },
  computed: {
    startCount() {
      if (this.tableData) {
        return this.queryList.current === 1 ? this.queryList.current : (this.queryList.current - 1) * this.queryList.pageSize + 1
      }
      return 0
    },
    endCount() {
      if (this.tableData) {
        return this.queryList.current === 1 ? this.tableData.length : (this.queryList.current - 1) * this.queryList.pageSize + this.tableData.length
      }
      return 0
    }
  },

  mounted() {

  },
  created() {
    this.initData()
    this.getList()
  },
  methods: {
    // 根据小区名称获取收费项
    async getComExp(id) {
      this.$set(this.queryList, 'project_code', '')
      console.log(id)
      const res = await getExpensesByComIdApi({ community_code: id })
      console.log(res.data.data)
      this.houseArr = res.data.data// 拿到房产信息,遍历数据
      // 拿到res的code接口,然后调用收费项目,渲染数据
      const res2 = await getProjectApi({ community_code: id })
      // console.log(res2)
      this.project = res2.data.data
      // this.queryList.project_code = null
    },

    onSubmit() {
      this.queryList.current = 1
      this.getList()
    },
    // 调用小区名称的数据
    async initData() {
      const { data } = await getCommunityApi()
      // console.log(data)
      this.options = data.data
      // console.log(this.options)
    },
    // 渲染列表数据
    async getList() {
      const { data } = await getExpensesIndexApi(this.queryList)
      console.log(data)
      this.count = data.data.count
      this.tableData = data.data.rows

      this.tableData.builddingInfo = this.tableData.forEach((item, index) => {
        if (item.building && item.house) {
          this.tableData[index].buildingInfo = item.building.name + '栋' + item.house.name + '[' + item.house.owner_name + ']'
          console.log(item.building)
        } else {
          this.tableData[index].buildingInfo = '未知'
        }
      })
    },
    changeTime(res) {
      this.list.push(res)
      this.queryList.create_time = this.list.join(',')
    },
    reset() {
      this.queryList = {
        current: 1,
        pageSize: 10,
        community_code: null,
        project_code: '',
        create_time: '',
        house_code: ''
      }
      this.value = ''
      this.getList()
    },
    async  edit(id) {
      const res = await getEditIndexApi(id)
      console.log(res.data.data)
      this.$refs.addIndex.getComExp(res.data.data.community_code)
      this.$refs.addIndex.liftChange(res.data.data.community_code)
      this.$refs.addIndex.formData = res.data.data
      this.$refs.addIndex.isDrawer = true
    },
    async del(id) {
      await this.$confirm('确认删除吗')
      await getDelIndexApi(id)
      this.$message.success('删除成功')
      if (this.queryList.current > 1 && this.tableData.length === 1) {
        this.queryList.current--
      }
      // console.log(res)
      this.getList()
    },
    sizeChange(newSize) {
      console.log(11)
      this.queryList.pageSize = newSize
      this.getList()
    },

    // 页码变化事件
    currentChange(newPage) {
      // newPage 最新的页码
      this.queryList.current = newPage
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding:40px;
  .title{
  display: flex;
  align-items: center;
  h2{
    margin-right:20px;
  }
  h5{
    font-weight: 400;
    color:#9c9c9d;
    vertical-align: middle;
  }
}
.demo-form-inline{
  display: flex;
}
.el-form-item{
  margin-right:60px;
}
.btn{
  padding-top:40px;
}
.box-card{
  margin-bottom:10px;
}
.bottom{
  display: flex;
  align-items: center;
  font-size:13px;
justify-content: end;
}
}

</style>
